<template>
  <div class="front-header" :class="{ 'compact-header': isCompact }">
    <div class="front-header-left" @click="router.push('/front/home')">
      <img src="../../assets/imgs/logo.png" alt="">
      <div class="title">植物栽培学习平台</div>
    </div>
    <div class="front-header-center">
      <el-menu :default-active="router.currentRoute.value.path" router mode="horizontal">
        <el-menu-item index="/front/home">首页</el-menu-item>
        <el-menu-item index="/front/plant">植物百科</el-menu-item>
        <el-menu-item index="/front/exam">在线小测</el-menu-item>
        <el-menu-item index="/front/article">文章分享</el-menu-item>
        <el-menu-item index="/front/score">我的成绩</el-menu-item>
        <el-menu-item index="/front/plantCircle">交流论坛</el-menu-item>
        <el-menu-item index="/front/plantGuideList">种植指南</el-menu-item>
        <el-menu-item index="/front/pointsShop">积分商城</el-menu-item>
        <el-menu-item index="/front/weather">天气</el-menu-item>
      </el-menu>
    </div>
    <div class="front-header-right">
      <div v-if="!data.user.id">
        <el-button @click="router.push('/login')">登录</el-button>
        <el-button @click="router.push('/register')">注册</el-button>
      </div>
      <div v-else>
        <el-dropdown style="cursor: pointer; height: 60px">
          <div style="display: flex; align-items: center">
            <el-badge :value="unreadCount" :hidden="unreadCount <= 0" type="danger">
              <img style="width: 40px; height: 40px; border-radius: 50%;" :src="data.user.avatar" alt="">
            </el-badge>
            <span style="margin-left: 5px;">{{ data.user.name }}</span><el-icon><arrow-down /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/front/person')">个人中心</el-dropdown-item>
              <el-dropdown-item @click="router.push('/front/myShare')">我的分享</el-dropdown-item>
              <el-dropdown-item @click="router.push('/front/message')">我的消息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/front/myCircle')">我的动态信息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/front/pointsTranUser')">我的积分明细</el-dropdown-item>
              <el-dropdown-item @click="router.push('/front/pointsOrderUser')">我的兑换单</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { ArrowDown } from "@element-plus/icons-vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('user') || '{}')
});

import { unreadCount } from '@/router';
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";

const logout = () => {
  request.post('/logOut').then(res => {
    if (res.code === '200') {
      localStorage.removeItem('user');
      localStorage.removeItem('token');
      ElMessage.success('退出成功');
    } else {
      ElMessage.error(res.msg);
    }
  });
  router.push('/login');
};
const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('user') || '{}');
};

onMounted(() => {
  updateUser();
});

const isCompact = ref(false);

const toggleCompact = (compact) => {
  isCompact.value = compact;
}

defineExpose({ toggleCompact });
</script>

<style scoped>
.front-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 60px;
  /* 使用transform代替top定位 */
  top: 30px; /* 等于公告栏高度 */
  transform: translateY(0);
}

/* 紧凑模式样式 */
.compact-header {
  transform: translateY(0); /* 完全贴顶 */
  padding: 8px 20px;
  height: 50px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 头部元素过渡 */
.front-header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.front-header-left img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-header .front-header-left img {
  width: 34px;
  height: 34px;
}

.front-header-left .title {
  font-size: 18px;
  font-weight: bold;
  transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.front-header-center {
  flex-grow: 1;
  margin-left: 20px;
}
.compact-header .front-header-left .title {
  font-size: 17px;
}

/* 菜单项优化 */
.el-menu--horizontal {
  border-bottom: none;
  justify-content: center;
  transition: all 0.3s ease;
}

.el-menu--horizontal > .el-menu-item {
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  transition: padding 0.3s ease;
}

.compact-header .el-menu--horizontal > .el-menu-item {
  padding: 0 12px;
  height: 45px;
  line-height: 45px;
}

/* 右侧布局优化 */
.front-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: gap 0.3s ease;
}

/* 消息徽章定位 */
.el-dropdown :deep(.el-badge__content.is-fixed) {
  top: -5px;
  right: -5px;
  transform: scale(0.8);
}

/* 下拉菜单优化 */
.el-dropdown-menu {
  margin-top: 8px !important;
  min-width: 120px;
}

/* 响应式处理 */
@media (max-width: 1200px) {
  .el-menu--horizontal > .el-menu-item {
    padding: 0 10px;
    font-size: 14px;
  }
}
</style>



